<!--  -->
<script setup>
import { ref } from 'vue'
import render from '@/components/commentBox/render'
import CommentBox from '@/components/commentBox/CommentBox.vue'

defineProps({ commentInfo: Array })
const emit = defineEmits(['onCommentDelete', 'onCommentSubmit'])

const box = ref(null)
const default_reply = 'author'
const replyTo = ref(default_reply)

/* 删除与提交需要交给父组件处理 */
// function doDelete(id) {
//   emit('onCommentDelete', id)
// }
function doSubmit(inputText) {
  emit('onCommentSubmit', inputText)
  replyTo.value = default_reply

}

function doCancel() {
  replyTo.value = default_reply

}

function doReply(to) {
  box.value.push('@' + to + '\n')
  replyTo.value = to
}

function doQuote(to, content) {
  box.value.insert('> #ref ' + to + ' wrote:\n' + addRefChar(content) + '\n---\n')

  function addRefChar(t) {
    // 给每行添加引用字符
    return t.split('\n').map(item => '> ' + item).join('\n')
  }
}

function scrollToAndHighlight(id) {
  const element = document.getElementById(id)
  if (element == null) return
  let targetPosition = element.getBoundingClientRect().top + window.scrollY
  window.scrollTo({
    top: targetPosition - 60,
    behavior: 'smooth'
  })
  highlight()

  function highlight() {
    const raw = element.style.color
    element.style.color = 'red'
    setTimeout(() => element.style.color = raw, 2000)
  }
}
</script>

<template>
  <div class="comment-wrapper">
    <div class="section-title"> Comment List </div>
    <div class="section-subtitle">total: {{ commentInfo.length }}</div>
    <div class="comment-content">
      <div class="comment-container" v-for="(item, idx) in commentInfo" :key="item.id">
        <div class="comment">
          <div class="profile-info">
            <div class="username" :id="item.id">
              #{{ idx + 1 }}
              {{ item.fromName }}
            </div>
            <div class="date">{{ item.date }}</div>
          </div>
          <div class="post-content">
            <div class="post-header">
              <div class="post-info">
                共 {{ item.reply.length }} 条回复
              </div>
              <div class="post-buttons">
                <span title="回复" @click="doReply(item.fromName)" class="icon icon-reply"></span>
                <span title="引用" @click="doQuote(item.fromName, item.content)" class="icon icon-quote"></span>
              </div>
            </div>
            <div class="post-body" v-html="render(item.content)"> </div>
          </div>
        </div>
        <div class="replies">
          <div class="reply" v-for="reply in item.reply" :key="reply.id">
            <div class="profile-info">
              <div class="username" :id="reply.id">{{ reply.fromName }}</div>
              <div class="date">{{ reply.date }}</div>
            </div>
            <div class="post-content">
              <div class="post-header">
                <div class="post-info">
                  <a @click.prevent="scrollToAndHighlight(reply.replyId)" :href="'#' + reply.replyId">
                    <span class="icon icon-at"></span>
                  </a>
                  {{ reply.toName }}
                </div>
                <div class="post-buttons">
                  <span title="回复" @click="doReply(reply.fromName)" class="icon icon-reply"></span>
                  <span title="引用" @click="doQuote(reply.fromName, reply.content)" class="icon icon-quote"></span>
                </div>
              </div>
              <div class="post-body" v-html="render(reply.content)"> </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="section-title"> Leave a comment</div>
    <div class="section-subtitle">Your email address will not be published.</div>
    <div class="comment-box">
      <div class="sign">
        Reply to:
        <span class="reply-to"> {{ replyTo }}</span>
      </div>
      <CommentBox ref="box" @on-submit="doSubmit" @on-cancel="doCancel"></CommentBox>
    </div>
  </div>
</template>

<style scoped lang="scss">
.comment-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--view-category-bgc);
  box-shadow: 2px 2px 6px rgba(92, 95, 97, 0.5), -2px 0px 3px rgba(92, 95, 97, 0.5);
}

.section-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 20px 0 0px;
}

.section-subtitle {
  color: rgb(109, 118, 131);
}

.comment-content {
  width: 95%;
  margin: 20px auto;
}

.comment-container {
  margin-bottom: 15px;

  .comment {
    display: flex;
    min-height: 100px;
    border: 1px solid var(--comment-border-primary);
    box-shadow: 0px 4px 7px rgba(95, 87, 63, 0.158);
  }

  .replies {
    margin-left: 20px;
  }

  .reply {
    margin-top: 10px;
    border: 1px solid var(--comment-border-primary);
    display: flex;
    min-height: 80px;
    box-shadow: 0px 4px 7px rgba(95, 87, 63, 0.198);
  }
}

.comment .profile-info {
  min-width: 200px;
}

.reply .profile-info {
  min-width: 180px;
}

.profile-info {
  background: var(--comment-linear-01);
  padding: 0 5px;

  .username {
    font-weight: bold;
    border-bottom: 1px solid var(--comment-title-fc);
    width: max-content;
    color: var(--comment-title-fc);
  }

  .date {
    color: var(--text-02)
  }
}

.post-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-left: 1px dotted var(--comment-border-secondary);

  .post-header {
    background-color: var(--comment-header-bgc);
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid var(--comment-border-secondary);
    padding: 0 5px 0 10px;

    .post-info {
      color: #767876;
      font-style: italic;
    }

    .post-buttons span {
      padding: 0 10px;
      cursor: pointer;
    }
  }

  .post-body {
    flex: 1;
    background: var(--comment-linear-02);
    padding: 1em 0 1em 10px;
  }
}


.icon {
  mask-repeat: no-repeat;
  mask-position: center;
  vertical-align: middle;
  display: inline-block;
  background-color: var(--icon-bgc);
  margin: 1px;

  &:hover {
    background-color: red;
  }
}

.icon-reply {
  width: 18px;
  height: 18px;
  mask-image: url('/static/svg/reply.svg');
}

.icon-quote {
  width: 18px;
  height: 18px;
  mask-image: url('/static/svg/quote.svg');
}

.icon-at {
  width: 14px;
  height: 14px;
  mask-image: url('/static/svg/at.svg');
}


@media screen and (max-width: 769px) {

  .comment,
  .reply {
    flex-direction: column;
  }

  .profile-info {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #00661b;
  }

  .post-content {
    border-left: 0;
  }
}

.sign {
  margin: 0 0 10px 0;

  .reply-to {
    font-weight: bold;
    color: var(--text-02);
  }
}

.comment-box {
  width: 95%;
  margin: 20px auto;
}
</style>
